CSS Custom Properties

CSS custom proeprties are good not just for colors and paddings, but also for managing state and for multi-brand design systems. CSS properties can change at runtime, and are a great for theming. You can read and set properties in JavaScript. You can use custom properties to style shadow DOM

Best practices

You can use utility classes that add custom property to a container context

Change the value of variable, not the variable name

For some animations, you'll need to use custom @property

You can use CSS properties for calculations

• https://css-tricks.com/a-complete-guide-to-custom-properties/
• https://www.youtube.com/watch?v=HxJnvCOC2vQ
• https://css-tricks.com/patterns-for-practical-css-custom-properties-use/